<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="__STATIC__/css/mui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" href="__STATIC__/css/common.css">
    <link rel="stylesheet" href="__STATIC__/css/module.css">
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/mui.min.js"></script>
    <script src="__STATIC__/js/swiper.jquery.min.js"></script>
</head>
<body>

<!-- 引入通用导航 -->
{include file="Index/nav"}


<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="mui-slider" id="slider">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item">
                    <a href="http://www.baidu.com">
                        <img src="__STATIC__/images/slider.jpg">
                    </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="__STATIC__/images/slider.jpg">
                    </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="__STATIC__/images/slider.jpg">
                    </a>
                </div>
                <!-- 第三张 -->
                <div class="mui-slider-item">
                    <a href="http://www.baidu.com">
                        <img src="__STATIC__/images/slider.jpg">
                    </a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item">
                    <a href="http://www.baidu.com">
                        <img src="__STATIC__/images/slider.jpg">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
            <div class="topSearch">
                <a href="#" class="toSearchPage">请输入您要搜索的商品名称</a>
                <div class="login-msg">
                    <a href="#"><img src="__STATIC__/images/home-meg.png" alt="">消息</a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                var slider = mui("#slider");
                slider.slider({
                    interval: 5000
                });
            }
        </script>
        <div class="nav-imglist">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media">
                    <a href="#">
                        <span></span>
                        <div class="mui-media-body">今日特卖</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="#">
                        <span></span>
                        <div class="mui-media-body">单品上新</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="#">
                        <span></span>
                        <div class="mui-media-body">周周惠</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="#">
                        <span></span>
                        <div class="mui-media-body">团购</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="#">
                        <span></span>
                        <div class="mui-media-body">会员专区</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="mart10 bg-fff home-miaosha">
            <div class="title mui-clearfix">
                <h4 class="mui-pull-left"><a href="#"><img src="__STATIC__/images/timeicon.png" alt="">今日秒杀 <small>10:00开始</small></a></h4>
                <div class="time mui-pull-left"><span id="_h">00</span>:<span id="_m">00</span>:<span id="_s">00</span></div>
                <a class="mui-pull-right more" href="#"><b>秒杀专场</b><span class="mui-icon mui-icon-arrowright"></span></a>
            </div>
            <ul class="mui-clearfix">
                <li>
                    <a href="#">
                        <h4>新鲜柠檬</h4>
                        <p><span><small>￥</small>2.00</span>元/个<br/><del>￥8.00</del></p>
                        <img src="__STATIC__/images/pic180x180.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h4>新鲜柠檬</h4>
                        <p><span><small>￥</small>2.00</span>元/个<br/><del>￥8.00</del></p>
                        <img src="__STATIC__/images/pic180x180.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h4>新鲜柠檬</h4>
                        <p><span><small>￥</small>2.00</span>元/个<br/><del>￥8.00</del></p>
                        <img src="__STATIC__/images/pic180x180.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h4>新鲜柠檬</h4>
                        <p><span><small>￥</small>2.00</span>元/个<br/><del>￥8.00</del></p>
                        <img src="__STATIC__/images/pic180x180.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="mart10 bg-fff home-temai">
            <h4><img src="__STATIC__/images/hot.png" alt="">特卖专区</h4>
            <div class="mui-clearfix list">
                <a href="#"><img src="__STATIC__/images/pic250x140.jpg" alt=""></a>
                <a href="#"><img src="__STATIC__/images/pic250x140.jpg" alt=""></a>
                <a href="#"><img src="__STATIC__/images/pic250x140.jpg" alt=""></a>
            </div>
            <a href="#"><img src="__STATIC__/images/pic750x200.jpg" class="width-full" alt=""></a>
            <ul class="mui-clearfix">
                <li>
                    <a href="#">
                        <img src="__STATIC__/images/product.jpg" alt="">
                        <h5>鸡翅中12个装新鲜肉鸡鸡翅中</h5>
                        <div class="price">￥20.00</div>
                    </a>
                    <a class="buy" href="#">立即购买</a>
                </li>
                <li>
                    <a href="#">
                        <img src="__STATIC__/images/product.jpg" alt="">
                        <h5>鸡翅中12个装新鲜肉鸡鸡翅中</h5>
                        <div class="price">￥20.00</div>
                    </a>
                    <a class="buy" href="#">立即购买</a>
                </li>
                <li>
                    <a href="#">
                        <img src="__STATIC__/images/product.jpg" alt="">
                        <h5>鸡翅中12个装新鲜肉鸡鸡翅中</h5>
                        <div class="price">￥20.00</div>
                    </a>
                    <a class="buy" href="#">立即购买</a>
                </li>
            </ul>
        </div>
        <div class="mart10 bg-fff home-huodong">
            <h4><img src="__STATIC__/images/h-huodong.png" alt="">活动专题</h4>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt1.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt2.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt3.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt1.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt2.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="__STATIC__/images/zt3.jpg" alt=""></a>
                    </div>
                </div>
            </div>
        </div>


        <div class="mart10 bg-fff home-tuijian">
            <h4><img src="__STATIC__/images/h-tuijian.png" alt="">暖心推荐</h4>
            <div class="tabbox mui-clearfix">
                <a class="tab tab1 on" num="1" href="javascript:">热卖推荐</a>
                <a class="tab tab2" num="2" href="javascript:">新鲜水果</a>
                <a class="tab tab3" num="3" href="javascript:">海鲜水产</a>
                <a class="tab tab4" num="4" href="javascript:">精品肉禽</a>
            </div>
            <!--数据列表-->
            <div class="tj-data-box bg-fff">
                <ul class="tj-data1 mui-clearfix">
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                </ul>
                <ul style="display: none;" class="tj-data2 mui-clearfix">
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                </ul>
                <ul style="display: none;" class="tj-data3 mui-clearfix">
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                </ul>
                <ul style="display: none;" class="tj-data4 mui-clearfix">
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" class="img-responsive" alt="">
                            <div class="con">
                                <h2>美国 进口无籽红提 1kg装 新鲜水果 美国进口 肉质细腻 品质之选</h2>
                                <div class="price">
                                    ￥562.00
                                </div>
                            </div>
                        </a>
                        <a class="cart" href="#"><span class="mui-icon mui-icon-plus"></span>加入购物车</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
<script>
    /*全局重新定义A链接的href*/
    mui(document.body).on('tap','a',function(){
        document.location.href=this.href;
    });
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    var count = 2;// 从第二页开始
    var lastp = 5;// 总页数
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {

        $.getJSON("{:url('index/goods/get_list_by_ajax')}", {p:count}, function (res) {

            setTimeout(function() {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > lastp)); //参数为true代表没有更多数据了。
                var n=1;
                var table = $(".tj-data"+n);
                if(res.code==1) {
                    table.append(res.htmlstr);
                }
            }, 1500);


        });

    }
    /*倒计时*/
    function checkTime(i) {
        if (i<10) {
            i = "0" +i;
        }
        return i;
    };
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date("2017-11-14 23:23:23");
        var end = endDate.getTime();
        //时间差
        var leftTime = end-now;
        //定义变量 d,h,m,s保存倒计时的时间
        var h,m,s;
        if (leftTime>=0) {
            h = Math.floor(leftTime/1000/60/60);
            m = Math.floor(leftTime/1000/60%60);
            s = Math.floor(leftTime/1000%60);
            h=checkTime(h);
            m=checkTime(m);
            s=checkTime(s);
        }
        //将倒计时赋值到div中
        document.getElementById("_h").innerHTML = h;
        document.getElementById("_m").innerHTML = m;
        document.getElementById("_s").innerHTML = s;
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime,1000);
        if(leftTime<=0){
            $(".time").html("秒杀结束！")
        }
    }
    window.onload=function () {
        countTime()
    }
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 2.5,
        spaceBetween: 10
    });
    $(function () {
        $("a.tab").on("tap",function () {
            $(this).addClass("on").siblings().removeClass("on");
            var num=$(this).attr("num");
            var cla=".tj-data"+num;
            $(cla).show().siblings().hide();
        })
    })
</script>
</body>
</html>